<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <style>
        #app>* {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <!-- 
        案例总结
            1.使用v-bind 动态设置标签属性
            2.用index当做下标 来切换数组里面的图片
            3.当下边是0或者最后一张图片的时候 要隐藏 上下页要不然就会超出下标
            4.使用v-show 切换按钮的显示与隐藏 因为比较频繁所以使用v-show
    -->
    <div id="app">
        <button v-show="index>0" @click="index--">上一页</button>
        <img :src="imgList[index]" alt="">
        <button v-show="index<imgList.length-1" @click="index++">下一页</button>
    </div>

    <script src="./script/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                // 控制数组的下标
                index: 0,
                imgList: [
                    './imgs/11-00.gif',
                    './imgs/11-01.gif',
                    './imgs/11-02.gif',
                    './imgs/11-03.gif',
                    './imgs/11-04.png',
                    './imgs/11-05.png'
                ]
            }
        })
    </script>
</body>

</html>